<template>
	<div class="class-project">
		<header>
			<h2>课设管理</h2>
			<div class="course-filter">
				<div class="course-filter-item">
					<span style="margin-right: 10px;">课程类型</span>
					<el-select
						filterable
						placeholder="筛选相关课程"
						clearable
						size="small"
						v-model="filterCourseType"
						@change="loadCourses();loadProjects(1)"
					>
						<el-option
							v-for="item in COURSE_TYPE"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						/>
					</el-select>
				</div>
				<div class="course-filter-item">
					<span style="margin-right: 10px;">课程名</span>
					<el-select
						title="请先选择课程类型"
						:disabled="courses.length===0"
						filterable
						placeholder="筛选相关课程"
						clearable
						size="small"
						v-model="filterCourseId"
						@change="loadProjects(1)"
					>
						<el-option
							v-for="item in courses"
							:key="item.courseId"
							:label="item.courseName"
							:value="item.courseId"
						/>
					</el-select>
				</div>
			</div>
		</header>
		<div class="table-container">
			<el-table
				stripe
				:data="projects"
				@sort-change="sortChange"
				@filter-change="filterChange"
			>
				<el-table-column
					label="ID"
					prop="id"
				/>
				<el-table-column
					label="项目标题"
					prop="name"
					width="200"
				/>
				<el-table-column
					label="课程名"
					prop="courseName"
					width="150"
				/>
				<el-table-column
					label="作者"
					align="center"
					prop="creatorUser.nickname"
				/>
				<el-table-column
					label="阅读"
					align="center"
					prop="read"
					sortable
				/>
				<el-table-column
					label="收藏"
					align="center"
					prop="collect"
					sortable
				/>

				<el-table-column
					label="项目状态"
					align="center"
					:filters="[{ text: '已通过', value: true }, { text: '未通过', value: false }]"
					filter-placement="bottom-end"
					:filter-multiple="false"
					:filter-method="(value, row) => row.passed === value"
					column-key="filterPassed"
				>
					<template slot-scope="scope">
						<i
							v-if="scope.row.passed"
							class="success el-icon-success"
						/>
						<i
							v-else
							class="none el-icon-error"
						/>
					</template>
				</el-table-column>

				<el-table-column
					label="操作"
					align="center"
				>
					<template slot-scope="scope">
						<el-button
							size="mini"
							type="primary"
							@click="$pushTo('CourseDesignDetail',{id: scope.row.id})"
						>
							审阅
						</el-button>
					</template>
				</el-table-column>
			</el-table>

			<div class="pagination">
				<el-pagination
					background
					layout="prev, pager, next"
					:page-size="pageSize"
					:total="total"
					:current-page="pageNum"
					@current-change="loadProjects"
				/>
			</div>
		</div>
	</div>
</template>

<script>
import { getCourseDesigns, getCourseByType } from '@project/api/course'
import { COURSE_TYPE } from '@project/constants/course'

export default {
  route: {
    meta: {
      login: true,
      showLeft: true,
      activeName: 'CourseDesign',
    }
  },
  data() {
    return {
      COURSE_TYPE,
      courses: [],
      sortBy: null,
      orderBy: null,
      pageNum: 1,
      pageSize: 10,
      total: 0,
      filterPassed: null,
      filterCourseType: null,
      filterCourseId: null,
      projects: [],
    }
  },
  async created() {
    this.loadProjects(1)
  },
  methods: {
    /**
		 * 加载课程
		 */
    async loadCourses() {
      this.filterCourseId = null
      if (this.filterCourseType) {
        const { data: res } = await getCourseByType(this.filterCourseType)

        this.courses = res
        console.log(this.courses)
      } else {
        this.courses = []
      }
    },
    /**
		 * 加载项目
		 */
    async loadProjects(pageNum = this.pageNum) {
      this.$loading()
      try {
        const params = {
          pageNum,
          pageSize: this.pageSize,
          sortBy: this.sortBy,
          orderBy: this.orderBy,
          passed: this.filterPassed,
          cType: this.filterCourseType,
          courseId: this.filterCourseId
        }

        const { data: res } = await getCourseDesigns(params)

        this.projects = res.pageData
        this.pageNum = pageNum
        this.total = res.total
        console.log(this.projects)
      } catch (err) {
        console.log(err)
      }
      this.$hideLoading()
    },
    /**
		 * 排序发生改变
		 */
    sortChange(column) {
      /* 判断排序标志是否含. */
      const reg = /\./

      if (reg.test(column.prop)) {
        column.prop = column.prop.split('.')[ 0 ]
      }
      this.sortBy = column.order ? column.prop : null
      if (column.order) {
        this.orderBy = column.order === 'descending' ? 'desc' : 'asc'
      } else {
        this.orderBy = column.order
      }
      this.loadProjects(1)
    },
    /**
		 * 筛选改变
		 */
    filterChange(filters) {

      for (const key in filters) {
        const res = filters[ key ]

        if (res.length === 0) {
          this[ key ] = null
        } else {
          this[ key ] = res[ 0 ]
        }
        console.log(this[ key ])
      }
      this.loadProjects(1)
    }
  }
}
</script>

<style lang="scss" scoped>
.class-project {
  position: relative;
  padding: 20px;
  font-size: $sSmall;

  h2 {
    margin-bottom: 10px;
    color: $blue;
  }

  .course-filter {
    display: flex;

    &-item {
      margin-right: 20px;
    }
  }

  .el-table {
    i {
      font-size: $sLarge;

      &.success {
        color: $green;
      }

      &.none {
        color: $dark3;
      }
    }
  }

  .pagination {
    margin-top: 10px;
    text-align: right;
  }
}
</style>
